<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 基础表格 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-form ref="form" :inline="true" :model="form">
                    <!-- <el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAllSelection">批量删除</el-button> -->
                    <el-form-item label="任务名称">
                        <el-input
                            placeholder="请输入活动名称"
                            clearable
                            @clear="handleClear"
                            @keyup.native.enter="handleSearch"
                            v-model="query.name"
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="活动时间">
                        <div class="block">
                            <el-date-picker
                                @change="handleChange"
                                v-model="query.date"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            >
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="活动状态">
                        <el-select @change="handleChange_" :clearable="true" v-model="query.status" class="handle-select mr10">
                            <el-option key="10" label="上线" :value="10"></el-option>
                            <el-option key="20" label="已过期" :value="20"></el-option>
                            <el-option key="30" label="未上线" :value="30"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="渠道">
                        <el-select @change="handleChange__" :clearable="true" v-model="query.channelType" class="handle-select mr10">
                            <el-option key="10" label="所有" value="10"></el-option>
                            <el-option key="20" label="APP" value="20"></el-option>
                            <el-option key="30" label="H5" value="30"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                </el-form>
            </div>

            <div class="handle-box_">
                <span class="title">任务列表</span>
                <el-button type="primary" @click="handleAddTask">添加任务</el-button>
            </div>

            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>

                <el-table-column label="任务ID" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>

                <el-table-column label="任务类型" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{
                        scope.row.type == 10
                            ? '新用户任务'
                            : scope.row.type == 20
                            ? '推荐任务'
                            : scope.row.type == 30
                            ? '日常任务'
                            : scope.row.type == 40
                            ? '专属任务'
                            : scope.row.type == 50
                            ? '签到任务'
                            : ''
                    }}</template>
                </el-table-column>

                <el-table-column label="任务名称" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>

                <el-table-column label="有效期" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.startTime + '-' + scope.row.endTime }}</template>
                </el-table-column>

                <el-table-column label="渠道" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{
                        scope.row.channelType == 10 ? '所有' : scope.row.channelType == 20 ? 'APP' : scope.row.channelType == 30 ? 'H5' : ''
                    }}</template>
                </el-table-column>

                <el-table-column label="积分值" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.score }}</template>
                </el-table-column>

                <el-table-column label="活动状态" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{
                        scope.row.status == 10 ? '上线' : scope.row.status == 20 ? '已过期' : scope.row.status == 30 ? '未上线' : ''
                    }}</template>
                </el-table-column>

                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleOnline(scope.$index, scope.row)">上线</el-button>
                        <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" @click="handleSee(scope.$index, scope.row)">查看</el-button>
                        <el-button type="text" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total,sizes, prev, pager, next, jumper"
                    :page-sizes="[5, 10, 20, 30]"
                    @size-change="handleSizeChange"
                    :current-page="query.pageIndex + 1"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import NProgress from 'nprogress';
export default {
    name: 'IntegralGet',
    data() {
        return {
            query: {
                name: null,
                startTime: null,
                endTime: null,
                date: null,
                status: null,
                channelType: null,
                pageIndex: 0,
                pageSize: 10
            },
            tableData: [
                {
                    name: '11'
                }
            ],
            multipleSelection: [],
            delList: [],
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1
        };
    },
    created() {},
    mounted() {},
    activated() {
        this.getData();
    },
    methods: {
        handleClear() {
            console.log(this.query.name);
            if (this.query.name == '') {
                this.query.name = null;
            }
            this.handleSearch();
        },
        handleChange_(value) {
            if (value == '') {
                this.query.status = null;
            }
            this.handleSearch();
        },
        handleChange__(value) {
            if (value == '') {
                this.query.channelType = null;
            }
            this.handleSearch();
        },
        handleChange(date) {
            console.log(date);
            if (date != null) {
                this.query.startTime = this.$standardDateToLocal(date[0], 'yyyy-mm-dd', '-');
                this.query.endTime = this.$standardDateToLocal(date[1], 'yyyy-mm-dd', '-');
            } else {
                this.query.startTime = null;
                this.query.endTime = null;
            }
            this.handleSearch();
        },
        async getData() {
            try {
                NProgress.start();
                const url = '/score/task/list';
                const { data: res } = await this.$http[0].get(url, {
                    params: {
                        page: this.query.pageIndex,
                        size: this.query.pageSize,
                        name: this.query.name,
                        startTime: this.query.startTime,
                        endTime: this.query.endTime,
                        status: this.query.status,
                        channelType: this.query.channelType
                    }
                });
                console.log(res);
                if (res.data.content && res.data.content.length > 0) {
                    res.data.content.map(item => {
                        item.startTime = this.$dateFormat(item.startTime, '', '.');
                        item.endTime = this.$dateFormat(item.endTime, '', '.');
                    });
                    this.tableData = res.data.content;
                    this.pageTotal = res.data.totalElements || 0;
                } else {
                    this.tableData = [];
                    this.pageTotal = 0;
                }
                NProgress.done();
            } catch (err) {
                console.dir(err);
                NProgress.done();
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 0);
            this.getData();
        },
        // 添加任务
        handleAddTask() {
            this.$router.replace({
                path: '/integral/add/task'
            });
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.delete_(row.id);
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        async delete_(id) {
            try {
                const url = '/score/task/offline';
                const { data: res } = await this.$http[0].get(url, {
                    params: {
                        id
                    }
                });
                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                this.getData();
            } catch (err) {
                console.log(err);
            }
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            const length = this.multipleSelection.length;
            let str = '';
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].name + ' ';
            }
            this.$message.error(`删除了${str}`);
            this.multipleSelection = [];
        },
        // 编辑操作
        handleEdit(index, row) {
            console.log(index, row);
            this.$router.replace({
                path: '/integral/add/task',
                query: {
                    id: row.id,
                    _: 0
                }
            });
        },
        handleOnline(index, row) {
            // 二次确认
            this.$confirm('确定要上线吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.goOnline(row.id);
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消上线'
                    });
                });
        },
        async goOnline(id) {
            try {
                const url = '/score/task/publish';
                const { data: res } = await this.$http[0].get(url, {
                    params: {
                        id
                    }
                });
                console.log(res);
                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                this.getData();
            } catch (err) {
                console.dir(err);
            }
        },
        handleSee(index, row) {
            this.$router.replace({
                path: '/integral/add/task',
                query: {
                    id: row.id,
                    _: 1
                }
            });
        },

        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val - 1);
            this.getData();
        },
        handleSizeChange(val) {
            this.$set(this.query, 'pageSize', val);
            this.getData();
        }
    }
};
</script>

<style scoped lang="scss">
.handle-box {
    margin-bottom: 20px;
    // .el-form {
    //     display: grid;
    //     grid-auto-flow: column;
    //     justify-content: flex-start;
    //     .el-form-item {
    //         width: 100%;
    //         .el-form-item__content {
    //             .el-select,
    //             .handle-input {
    //                 width: 100%;
    //             }
    //         }
    //     }
    // }
}
.handle-box_ {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid #dcdfe6;
    .title {
        color: rgb(16, 16, 16);
        font-weight: 700;
    }
}
.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>


